// const { defineConfig } = require("@vue/cli-service");
const path = require("path");

module.exports = ({
  // 部署应用包时的基本URL
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

  // 输出文件目录
  outputDir: "dist",

  // 放置生成的静态资源的目录
  assetsDir: "static",

  // 是否在保存的时候使用 `eslint-loader` 进行检查
  lintOnSave: process.env.NODE_ENV !== "production",

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,

  // webpack 配置
  configureWebpack: {
    // 性能提示
    performance: {
      hints: false,
    },
    // 优化配置
    optimization: {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          vendor: {
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial",
          },
          common: {
            name: "chunk-common",
            minChunks: 2,
            priority: 5,
            chunks: "initial",
            reuseExistingChunk: true,
          },
        },
      },
    },
  },

  // CSS 配置
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    extract: process.env.NODE_ENV === "production",
    // 是否为 CSS 开启 source map
    sourceMap: false,
    // 向 CSS 相关的 loader 传递选项
    loaderOptions: {
      less: {
        // 全局 less 变量
        additionalData: `@import "@/styles/variables.less";`,
      },
    },
  },

  // 开发服务器配置
  devServer: {
    // 端口号
    port: 8080,
    // 是否自动打开浏览器
    open: true,
    // 是否启用热重载
    hot: true,
    // 代理配置
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },

  // 第三方插件配置
  pluginOptions: {
    // 自动导入组件
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [],
    },
  },

//   module: {
//     // 配置图片压缩
//     rules: [
//         {
//             test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
//             use: [
//                 {
//                     loader: 'url-loader',
//                     options: {
//                         limit: 8192, // 小于8KB的图片会被转换为DataURL，大于8KB的会被file-loader处理
//                         fallback: {
//                             loader: 'file-loader', // 使用 file-loader 处理大于limit的图片
//                             options: {
//                                 name: '[path][name].[hash:8].[ext]', // 输出路径和文件名
//                                 outputPath: 'images', // 输出路径
//                             }
//                         }
//                     }
//                 },
//                 {
//                     loader: 'image-webpack-loader',
//                     options: {
//                         mozjpeg: {
//                             progressive: true,
//                             quality: 65, // 压缩jpg图片的质量，范围是0到100。
//                         },
//                         optipng: {
//                             enabled: false, // 禁用optipng压缩，因为pngquant已经提供了更好的压缩效果。
//                         },
//                         pngquant: {
//                             quality: [0.65, 0.90], // 压缩png图片的质量，范围是0到1，0表示最低质量，1表示最高质量。
//                             speed: 4, // 压缩速度，范围是1到10，1表示最快，10表示最慢。
//                         },
//                         gifsicle: {
//                             interlaced: true, // 不使用隔行扫描的方式压缩gif文件，以提升性能。 
//                         },
//                         webp: {
//                             quality: 75, // webp格式的质量，范围是0到100。
//                         },
//                     }
//                 }
//         ],
//       },
//     ],
//   },

  // 链式操作 webpack 配置
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];

    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );

    // 设置标题
    config.plugin("html").tap((args) => {
      args[0].title = "Vue App";
      return args;
    });

    // 设置别名
    config.resolve.alias
      .set("@", path.resolve(__dirname, "src"))
      .set("@components", path.resolve(__dirname, "src/components"))
      .set("@views", path.resolve(__dirname, "src/views"))
      .set("@assets", path.resolve(__dirname, "src/assets"));

    // 图片压缩
    // if (process.env.NODE_ENV === "production") {
    //   config.module
    //     .rule("images")
    //     .use("image-webpack-loader")
    //     .loader("image-webpack-loader")
    //     .options({
    //       bypassOnDebug: true,
    //     })
    //     .end();
    // }
  },
});

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/styles/mixins.less")],
    });
}
